<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      智慧城市大气环境监测平台
    </div>
    <!-- 体部 -->
    <div class="content">
      <!-- 顶部统计卡片 -->
      <div class="stat-cards">
        <div class="stat-card device-total">
          设备总数
          <div class="stat-value">{{ deviceStats.total || 0 }}台</div>
        </div>
        <div class="stat-card device-online">
          在线设备数
          <div class="stat-value">{{ deviceStats.online || 0 }}台</div>
        </div>
        <div class="stat-card device-offline">
          离线设备数
          <div class="stat-value">{{ deviceStats.offline || 0 }}台</div>
        </div>
        <div class="stat-card project-total">
          工程总数
          <div class="stat-value">{{ deviceStats.projects || 0 }}个</div>
        </div>
        <div class="stat-card task-total">
          工单总数
          <div class="stat-value">{{ deviceStats.tasks || 0 }}个</div>
        </div>
      </div>
      
      <!-- 上边占2份 -->
      <div class="top">
        <!-- 左侧部分 -->
        <div class="left">
          <!-- 设备数据趋势图 -->
          <div class="chart">
            <C223></C223>
          </div>
        </div>
        
        <!-- 右侧部分 -->
        <div class="right">
          <!-- 设备状态饼图 -->
          <div class="chart">
            <C221></C221>
          </div>
          <!-- 工程状态统计 -->
          <div class="chart">
            <C222></C222>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request'

import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import C223 from './components/C223.vue'

export default {
  components: {
    C221,
    C222,
    C223,
  },
  data() {
    return {
      deviceStats: {
        total: 0,
        online: 0,
        offline: 0,
        projects: 0,
        tasks: 0
      }
    }
  },
  methods: {
    // 获取工单总数
    async getWorkOrderCount() {
      try {
        const res = await get('/workorder/pageQuery', { page: 1, pageSize: 1 })
        if (res && res.data) {
          this.deviceStats.tasks = res.data.total || 0
        }
      } catch (error) {
        console.error('获取工单总数失败:', error)
      }
    },
    // 获取工程总数
    async getProjectCount() {
      try {
        const res = await get('/engineer/pageQuery', { page: 1, pageSize: 1 })
        if (res && res.data) {
          this.deviceStats.projects = res.data.total || 0
        }
      } catch (error) {
        console.error('获取工程总数失败:', error)
      }
    },
    async getDeviceStats() {
      try {
        console.log('开始获取设备统计数据')
        const res = await get('/dashboard/queryDeviceOnlineNumber')
        console.log('设备统计数据响应:', JSON.stringify(res, null, 2))
        
        if (res && res.data) {
          const online = res.data.find(item => item.type === '在线')?.value || 0
          const offline = res.data.find(item => item.type === '离线')?.value || 0
          
          this.deviceStats = {
            ...this.deviceStats,
            total: online + offline,
            online: online,
            offline: offline
          }
          console.log('更新后的设备统计数据:', JSON.stringify(this.deviceStats, null, 2))
        } else {
          console.warn('获取设备统计数据为空')
        }
      } catch (error) {
        console.error('获取设备统计数据失败:', error)
        this.$message.error('获取设备统计数据失败')
      }
    }
  },
  async created() {
    // 并行获取所有数据
    await Promise.all([
      this.getDeviceStats(),
      this.getWorkOrderCount(),
      this.getProjectCount()
    ])
  },
  mounted() {
    // 定时刷新数据
    setInterval(() => {
      this.getDeviceStats()
      this.getWorkOrderCount()
      this.getProjectCount()
    }, 30000) // 每30秒刷新一次
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  background-image: linear-gradient(to right, #1a6fc9, #2a8ae5, #1a6fc9);
  background-size: 100% 100%;
  font-size: 28px;
  color: white;
  text-align: center;
  line-height: 60px;
  font-family: "楷体";
  font-weight: bold;
}

.content {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  overflow: hidden;

  .stat-cards {
    display: flex;
    padding: 10px;
    flex-shrink: 0;
    
    .stat-card {
      flex: 1;
      height: 120px;
      margin: 0 5px;
      border-radius: 4px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      
      .stat-value {
        margin-top: 10px;
        font-size: 24px;
      }
      
      &.device-total {
        background-color: #FFCC66;
      }
      
      &.device-online {
        background-color: #FFA07A;
      }
      
      &.device-offline {
        background-color: #FF7F7F;
      }
      
      &.project-total {
        background-color: #DC143C;
      }
      
      &.task-total {
        background-color: #9370DB;
      }
    }
  }
  
  .top {
    flex: 1;
    display: flex;
    padding: 10px;
    min-height: 0;
    
    .left {
      flex: 2;
      margin-right: 10px;
      display: flex;
      
      .chart {
        flex: 1;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        min-height: 610px;
        padding: 0 !important;
      }
    }
    
    .right {
      flex: 1;
      min-width: 500px;
      display: flex;
      flex-direction: column;
      
      .chart {
        height: calc(50% - 5px);
        min-height: 300px;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  // 给所有图表div设置内边距
  .chart {
    padding: 15px;
  }
}
</style>